<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar  title="会员中心" :right-text="navRightText" @click-right="userLogout" />
        </div>
        <div class="top">
            <div class="top-username">{{username}}</div>
           <img v-if="isLogin" :src="avatarImg" class="top-img" />
           <div v-if="!isLogin" class="top-noLogin"><van-icon name="manager" /></div>
        </div>
        <div class="login">
            <div><van-button type="warning" @click="goLogin">我要登录</van-button></div>
            <div><van-button type="primary" @click="goRegister">我要注册</van-button></div>
        </div>
        <div>
            <van-cell-group>
                <van-cell title="会员卡" is-link />
                <van-cell title="地址管理" is-link  />
                <van-cell title="我的订单" is-link  />
                <van-cell title="会员权益" is-link />
                <van-cell title="联系我们" is-link  />
            </van-cell-group>

        </div>

    </div>
</template>

<script>
    export default {
        name: 'Vip',
        data() {
            return {
                avatarImg: require('@/assets/img/cute.jpg'),
                username: '未登录',
                isLogin: false,
                navRightText: '退出登录',
            }
        },
        created() {
            let userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : '';
            this.isLogin = userInfo ? true : false;
            this.username = this.isLogin ? '欢迎，'+userInfo.userName : '未登录';
        },
        activated() {
            let userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : '';
            this.isLogin = userInfo ? true : false;
            this.username = this.isLogin ? '欢迎，'+userInfo.userName : '未登录';
        },
        methods: {
            goLogin() {
                this.$router.push({name:'Login'})
            },
            goRegister() {
                this.$router.push({name:'Register'})
            },
            // 退出登录
            userLogout() {
                localStorage.removeItem('userInfo');
                this.isLogin = false;
                this.navRightText = '';
                this.$toast.success('您已退出登录');
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/common.styl';
    .navbar-div {
        /deep/ .van-nav-bar {
            background-color: $colorC;
        }
        /deep/ .van-nav-bar__title {
            font-weight: bold;
        }
        /deep/ .van-nav-bar__text {
            color: red;
        }
    }
    .top{
        position: relative;
        height:5rem;
        text-align: center;
        padding-top:2rem;
        background-color: #EEA2AD;
        .top-username {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 14px;
            font-weight: 500;
        }
        .top-img, .top-noLogin{
            width: 70px;
            height: 70px;
            border-radius: 50px;
        }
        .top-noLogin {
            position: absolute;
            background-color: #ccc;
            top: 32px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 27px;
            line-height: 70px;
            text-align: center;
        }
    }
    .login{
        display: flex;
        flex-direction: row;
        background-color: #fff;
        padding:10px;
    }
    .login div{
        flex:1;
        text-align: center;
    }
</style>